<template>
  <el-cascader
    ref="cascader"
    :placeholder="placeholder"
    v-model="valueTitle"
    :disabled="disabled"
    :clearable="clearable"
    @clear="clearHandle"
    :props="props"
    :size="size"
    @change="handleChange"
    :options="valueData"
    :show-all-levels="false"
    
  >
  </el-cascader>
</template>

<script>
import addressList from "./cityData"

export default {
  name: 'el-tree-select',
  props: {
    /* 配置项 */
    props: {
      type: Object,
      default: () => {
        return {
          expandTrigger: 'hover',
          value: 'code',         // ID字段名
          label: 'name',         // 显示名称
          children: 'children',   // 子级字段名
          multiple: true,          // 默认可多选
          emitPath: false
        }
      }
    },
    /* 选项列表数据(树形结构的对象数组) */
    list: {
      type: Array,
      default: () => { return null }
    },
    /* 初始值 */
    value: {
      type: String,
      default: () => { return null }
    },
    placeholder: {
      type: String,
      default: () => { return '请选择' }
    },
    /* 初始值 */
    url: {
      type: String,
      default: () => { return '/sys/area/treeData' }
    },
    disabled: {
      type: Boolean,
      dafault: () => { return false }
    },
    showCheckbox: {
      type: Boolean,
      dafault: () => { return false }
    },
    /* 初始值 */
    label: {
      type: String,
      default: () => { return null }
    },
    /* 可清空选项 */
    clearable: {
      type: Boolean,
      default: () => { return true }
    },
    size: {
      type: String,
      default: () => { return 'small' }
    },
    /* 自动收起 */
    accordion: {
      type: Boolean,
      default: () => { return false }
    },
    /* 是否只显示前两级 */
    isCheckPreTwo: {
      type: Boolean,
      default: () => { return false }
    }
  },
  data() {
    return {
      valueTitle: [],
      valueData: [],
    }
  },
  created() {
    const list = addressList
    list.forEach(item => {
      if (item.children) {
        // 如果只显示前两级
        if (this.isCheckPreTwo) {
          item.children.forEach(it => {
            delete it.children
          })
        }
      }
    })
    this.valueData = list
    if (this.value) {
      this.valueTitle = this.value.split(',')
    }
  },
  mounted() {
  },
  methods: {
    // 切换选项
    handleChange(node) {
      const valueLabels = []
      this.$emit('getValue', this.valueTitle.join(','))
      this.$nextTick(() => {
        const nodes = this.$refs.cascader.getCheckedNodes()
        nodes.forEach((item) => {
          valueLabels.push(item.label)
        })
        this.$emit('getLabel', this.valueTitle.join(',') + "|" + valueLabels.join(','))
      })
    },
    // 清除选中
    clearHandle() {
      this.valueTitle = ''
      this.$emit('getValue', null)
    },
    /* 清空选中样式 */
    clearSelected() {
      let allNode = document.querySelectorAll('#tree-option .el-tree-node')
      allNode.forEach((element) => element.classList.remove('is-current'))
    },
  },
  watch: {
    value() {
      if (this.value === '') {
        this.clearHandle()
      } else if (this.value) {
        this.valueTitle = this.value.split(',')
      }
    }
  }
}
</script>